<template>
	<uv-navbar :bgColor="props.bgColor" :height="menuButtonHeight+'px'" :placeholder="props.placeholder">
		<!-- #ifndef MP-ALIPAY -->
		<template #left>
			<view class="page-back">
				<image v-if="props.isBack" @click="hanlderBack" class="back"
					:src="handleStaticResources('/static/images/back.png')"></image>
				<image v-if="props.isBack" @click="handleRouteSwitchTab(RouteSwitchTabEnum.home)" class="back"
					:src="handleStaticResources('/static/images/back-home.png')"></image>
				<text class="name" v-if="props.mode === 'left'"
					:style="{ 'color': props.titleColor }">{{ props.title }}</text>
			</view>
		</template>
		<!-- #endif -->
		<template v-if="props.mode === 'center'" #center>
			<view class="title" :style="{ 'color': props.titleColor }">{{ props.title }}</view>
		</template>
	</uv-navbar>
</template>

<script setup lang="ts">
	import { useSystemInfo } from '@/core/hooks';
	import { handleStaticResources, handleRouteSwitchTab } from '@/core/utils';
	import { RouteSwitchTabEnum } from '@/core/enum';

	const { menuButtonHeight } = useSystemInfo();

	const props = withDefaults(defineProps<{
		isBack ?: boolean,
		bgColor ?: string,
		titleColor ?: string,
		mode ?: string,
		title ?: string,
		handleCustomRouteJump ?: () => void | null,
		placeholder ?: boolean;
	}>(), {
		isBack: true,
		bgColor: '#eef2f6',
		titleColor: '#000',
		mode: 'center',
		title: '',
		handleCustomRouteJump: null,
		placeholder: true,
	});

	const hanlderBack = () => {
		if (props.handleCustomRouteJump) {
			props.handleCustomRouteJump();
			return;
		}
		const pages = getCurrentPages()
		if (pages.length === 1) {
			handleRouteSwitchTab(RouteSwitchTabEnum.home);
			return
		}
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
	@import './coreshop-navbar.scss';
</style>